import React , { Component } from "react"
import GlobalHeader from "@/components/GlobalHeader"
import Animate from 'rc-animate';
import { connect } from "dva"
import {Layout} from "antd"
import styles from './Header.less';
import Link from "umi/link"
import {MenuUnfoldOutlined, MenuFoldOutlined} from "@ant-design/icons"
const { Header } = Layout;

class HeaderView extends Component {
  state = {
    visible: true,
  };
  getHeadWidth = () => {
    const { isMobile, collapsed, setting } = this.props;
    console.log("setting>>>",setting)
    const { fixedHeader, layout } = setting;
    if (isMobile || !fixedHeader || layout === 'topmenu') {
      return '100%';
    }
    return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)';
  };
  render(){
    const width  =  this.getHeadWidth();
    const {handleMenuCollapse, logo, setting, isMobile, collapsed } = this.props;
    const { navTheme, layout, fixedHeader } = setting;
    const { visible } = this.state;
      const HeaderDom = visible ? (
          <Header
          style={{padding:0,width}}
          className={fixedHeader ? styles.fixedHeader : ''}
          >
              <GlobalHeader
              onCollapse={handleMenuCollapse}
              logo={logo}
              {...this.props}
              />
          </Header>
      ): null;
      return (
        <Animate component="" transitionName="fade">
          {HeaderDom}
        </Animate>
      );
  }
}
export default connect(({setting, })=>({
  setting,
}))(HeaderView);